<template>
  <el-scrollbar>
    <div class="w-full h-screen bg-zinc-200 p-1">
      <div
        class="flex items-center justify-between h-6 w-full bg-[#fff] rounded-sm mb-1 overflow-hidden"
      >
        <img
          :src="getImg('pacslogo.png')"
          alt=""
          class="w-[210px] h-4 object-contain"
        />
        <img
          :src="getImg('rt_icon.png')"
          alt=""
          class="h-full object-contain"
        />
      </div>
      <!-- <div class="p-1 my-1 rounded-sm bg-[#fff]">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }"
            >您当前的位置</el-breadcrumb-item
          >
          <el-breadcrumb-item>PACS临床浏览</el-breadcrumb-item>
          <el-breadcrumb-item>全部</el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
      <div class="bg-[#fff] rounded-sm flex">
        <form-submit
          labelWidth="80px"
          ref="searchForm"
          :searchData="form"
          :searchForm="searchForm"
          :formStyle="formStyle"
          @submit="handleSubmit"
        >
          <el-form-item
            label="开始日期"
            style="width: 300px; padding: 0; margin: 0"
          >
            <el-date-picker
              v-model="form.StartExamDate"
              format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="结束日期"
            style="width: 300px; padding: 0; margin: 0"
          >
            <el-date-picker
              v-model="form.EndExamDate"
              format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
        </form-submit>
      </div>
      <div class="mt-1">
        <el-table :data="examList" stripe style="width: 100%" border height="450">
          <el-table-column width="140" label="操作" align="center">
            <template #default="scope">
              <el-button
                v-for="(item, index) in tableOperation"
                :key="index"
                type="primary"
                size="small"
                link
                @click="handleTableOpn(item.name, scope.row)"
                >{{ item.name }}</el-button
              >
              <!-- <el-button type="primary" size="small" link>PDF</el-button> -->
              <!-- <el-button type="primary" size="small" link>影像</el-button> -->
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in examListLabel"
            align="center"
            :key="index"
            :prop="examListLabel[index].prop"
            :label="examListLabel[index].label"
            :width="examListLabel[index].width"
          />
        </el-table>
      </div>
      <div class="flex justify-end bg-[#fff] mt-1 rounded-sm pb-1 px-1">
        <el-pagination
          v-model:current-page="UseSearchFormHooks.page"
          v-model:page-size="UseSearchFormHooks.size"
          class="mt-1"
          background
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totalCount"
        />
      </div>
    </div>
  </el-scrollbar>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue'
import { useRouter } from 'vue-router'
import formSubmit from '@/components/formSubmit/index.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { Form, Exam } from '@/hooks/useSearchFormHooks'
import { ImgUtil } from '@/utils/imgUtil'
import dateUtil from '@/utils/dateUtil'
import PcHomeService from './service/index'
import UseSearchFormHooks, { PartialForm } from '@/hooks/useSearchFormHooks'
import useDiocmHooks from '@/hooks/useDiocmHooks'
const { getImg } = ImgUtil
const { useSearchForm, page, size, totalCount } = UseSearchFormHooks
const { findExamList, examList } = useSearchForm
const { findDiocmView } = useDiocmHooks
const { getDateRange } = dateUtil
const { pcHomeService } = PcHomeService
const { findExamListWithPage, findReportPdfById } = pcHomeService
const router = useRouter()
type keyofPropTable = keyof Exam
interface ExamListLabel {
  label: string
  prop: keyofPropTable
  width?: string
}
type keyofForm = keyof Form
type SearchForm = {
  type: string
  label: string
  prop: keyofForm
  style?: string
  placeholder?: string
  rules?: {
    required?: boolean
    message?: string
    trigger?: string
  }[]
  options?: any
  props?: any
  change?: any
}
const form: Ref<PartialForm> = ref({})
let entrustProps = { text: 'text', value: 'value' }
const examListLabel: ExamListLabel[] = [
  // { label: '操作', prop: 'id' }
  { label: '报告日期', prop: 'reportDate', width: '130' },
  { label: '设备类型', prop: 'machineType', width: '100' },
  { label: '姓名', prop: 'name', width: '70' },
  { label: '性别', prop: 'sex', width: '60' },
  { label: '影像所见', prop: 'describes' },
  { label: '影像意见', prop: 'diagnosis' },
  { label: '影像号', prop: 'oldDocID', width: '120' },
  { label: '门诊号', prop: 'outPatientNo', width: '120' },
  { label: '住院号', prop: 'inPatientNo', width: '100' },
  { label: '床号', prop: 'sickBedNo', width: '100' }
]
const deptTypecolumns = [
  { label: '不限', value: '' },
  { label: '骨科', value: '骨科' },
  { label: '急诊', value: '急诊' },
  { label: '妇科', value: '妇科' },
  { label: '产科', value: '产科' },
  { label: '儿科', value: '儿科' },
  { label: '五官科', value: '五官科' },
  { label: '外科', value: '外科' },
  { label: '内科', value: '内科' },
  { label: '眼科', value: '眼科' },
  { label: 'ICU', value: 'ICU' },
  { label: '放射科', value: '放射科' },
  { label: '病理科', value: '病理科' },
  { label: '内镜科', value: '内镜科' },
  { label: '系统科', value: '系统科' }
]
const checkTypecolumns = [
  { label: '不限', value: '' },
  { label: '超声', value: 'UIS' },
  { label: '放射', value: 'RIS' },
  { label: '内镜', value: 'EIS' },
  { label: '检验', value: 'LIS' },
  { label: '病理', value: 'PIS' }
]
const formStyle =
  'display:flex;flex-wrap:wrap;gap: 10px; padding: 10px 10px 10px 90px'
const searchForm: SearchForm[] = [
  {
    type: 'Input',
    label: '姓名:',
    prop: 'Name',
    style: 'width: 300px;padding: 0;margin: 0;',
    placeholder: '请输入',
    // 表单验证
    rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  {
    type: 'Select',
    label: '送检科室:',
    prop: 'FromDeptName',
    options: deptTypecolumns,
    style: 'width: 300px;padding: 0;margin: 0;',
    props: entrustProps,
    change: (row: any) => {
      changeCompany(row)
    },
    placeholder: '请选择送检科室',
    rules: [{ required: true, message: '请选择送检科室', trigger: 'change' }]
  },
  {
    type: 'Input',
    label: '送检医生:',
    prop: 'FromDocName',
    style: 'width: 300px;padding: 0;margin: 0;',
    placeholder: '请输入送检医生',
    rules: [{ required: true, trigger: 'blur' }]
  },
  {
    type: 'Input',
    label: '门诊号:',
    prop: 'OutPatientNo',
    placeholder: '请输入门诊号',
    style: 'width: 300px;padding: 0;margin: 0;'
  },
  {
    type: 'Input',
    label: '住院号:',
    style: 'width: 300px;padding: 0;margin: 0;',
    prop: 'InPatientNo',
    placeholder: '请输入住院号'
  },
  {
    type: 'Select',
    label: '检查类型:',
    style: 'width: 300px;padding: 0;margin: 0;',
    prop: 'ModuleName',
    // 渲染数组
    options: checkTypecolumns,
    // 下拉转换
    props: entrustProps,
    change: (row: any) => changeCompany(row),
    placeholder: '请选择检查类型',
    rules: [{ required: true, message: '请选择检查类型', trigger: 'change' }]
  },
  {
    type: 'Input',
    label: '影像号:',
    style: 'width: 300px;padding: 0;margin: 0;',
    prop: 'OldDocID',
    placeholder: '请输入影像号'
  },
  {
    type: 'Input',
    label: '床号:',
    style: 'width: 300px;padding: 0;margin: 0;',
    prop: 'SickBedNo',
    placeholder: '请输入床号'
  }
]
const tableOperation = [{ name: '详情' }, { name: 'PDF' }, { name: '影像' }]
const startTime = ref('')
const endTime = ref('')

const initTime = async () => {
  const data = new Date()
  const [start, end] = getDateRange(data, 7, true)
  form.value = {
    StartExamDate: (startTime.value = start),
    EndExamDate: (endTime.value = end)
  }
  await findExamList(form.value)
  console.log(examList.value)
}
initTime()

const ruleForm = ref({})
const handleSubmit = () => {
  UseSearchFormHooks.form = form.value
  findExamList(form.value)
}
const changeCompany = (value: any) => {
  console.log(value)
}
const changeDepar = (value: any) => {
  console.log(value)
}
const changePosition = (value: any) => {
  console.log(value)
}
const handleTableOpn = (type: string, item: Exam) => {
  console.log(type)
  if (type === '详情') {
    router.push(`/examDetail/${item.moduleName}/${item.id}`)
  } else if (type === 'PDF') {
    findReportPdfById(item.id)
  } else {
    findDiocmView(item.id, item.moduleName)
  }
}

const handleSizeChange = (value: number) => {}
const handleCurrentChange = (value: any) => {
  UseSearchFormHooks.page = value
  findExamListWithPage()
}
</script>

<style scoped></style>
